<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        li {
            list-style: none;
        }
        body {
            /* CSS3 抗锯齿形 让文字显示的更加清晰 */
            -webkit-font-smoothing: antialiased;
            background-color: #fff;
            font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB,
                "\5B8B\4F53", sans-serif;
            color: #666;
        }
        .floor{
            width: 1000px;
            margin: 0 auto;
        }
        .floor .box-hd {
            height: 100px;
        }
        .floor .box-hd h3 { 
            font-size: 30px;
            line-height: 100px;
            color: rgb(0, 0, 0);
            text-align: center;
            font-weight: 400;
        }
        .floor .w {
            margin-top: 30px;
        }
        .floor .box-bd{
            width: 640px;
            height: 476px;
            margin: 0 auto;
        }
        .floor .box-bd p{
            padding: 0 100px;
        }
        .fixedtool {
            position: fixed;
            top: 100px;
            left: 170px;
            width: 100px;
            background-color: #fff;
            display: none;
        }
        .fixedtool ul{
            border: 1px solid rgb(180, 180, 180);
        }
        .fixedtool li {
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 12px;
            border-bottom: 1px solid #ccc;
            cursor: pointer;
        }
        .fixedtool .current {
            background-color: #26ffff;
            color: rgb(90, 90, 90);
        }
    </style>
</head>
<body>
    <div class="w recom">
            <div class="floor">
                <div class="w">
                    <div class="box-hd">
                        <h3>边境牧羊犬</h3>
                    </div>
                    <div class="box-bd">
                        <img src="./imgs/d4628535e5dde711a8cd5db92a2b57129c1661ab.jpeg" alt="">
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;边境牧羊犬，（英文名：Border Collie），原产于苏格兰边境。它是柯利犬的一种，智商高、善察言观色，可以用眼神放牧羊群。</p>
                    </div>
                </div>
                <div class="w">
                    <div class="box-hd">
                        <h3>贵宾犬</h3>
                    </div>
                    <div class="box-bd">
                        <img src="./imgs/902397dda144ad34426e9c8f5b6695fd30ad8536.jpeg" alt="">
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贵宾犬（英文名：Poodle）原产地法国。它善于水上捕猎，根据体型分为三类：标准、迷你、玩具。</p>
                    </div>
                </div>
                <div class="w">
                    <div class="box-hd">
                        <h3>德国牧羊犬</h3>
                    </div>
                    <div class="box-bd">
                        <img src="./imgs/738b4710b912c8fc7561324775c70b4cd48821fc.jpeg" alt="">
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;德国牧羊犬（英文名：German Shepherd dog）原产地德国。一战时候的军用犬，现在多用作警犬、导盲犬等。</p>
                    </div>
                </div>
                <div class="w">
                    <div class="box-hd">
                        <h3>金毛寻回猎犬</h3>
                    </div>
                    <div class="box-bd">
                        <img src="./imgs/8c1001e93901213f4a171386de23afd82e2e9596.jpeg" alt="">
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金毛寻回猎犬（英文名：Golden Retriever），原产地苏格兰。对人类特别暖，被称为暖男。因为其见人自来熟，所以不适合看家护院。</p>
                    </div>
                </div>
                <div class="w">
                    <div class="box-hd">
                        <h3>杜宾犬</h3>
                    </div>
                    <div class="box-bd">
                        <img src="./imgs/d8f9d72a6059252dd666046cbe5f9a325ab5b9b6.jpeg" alt="">
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;杜宾犬（英文名：Dobermann）原产地在德国。它机警且聪明，属于军、警两用的犬种。</p>
                    </div>
                </div>
                <div class="w">
                    <div class="box-hd">
                        <h3>喜乐蒂牧羊犬</h3>
                    </div>
                    <div class="box-bd">
                        <img src="./imgs/37d3d539b6003af374160315beee5f551138b661.jpeg" alt="">
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;喜乐蒂牧羊犬，原产地苏格兰。主要分布在北美和英国，聪明、勇敢被用于放牧羊群。</p>
                    </div>
                </div>
                <div class="w">
                    <div class="box-hd">
                        <h3>拉布拉多猎犬</h3>
                    </div>
                    <div class="box-bd">
                        <img src="./imgs/b3b7d0a20cf431ad23fb1ef4c2f235a62fdd9824.jpeg" alt="">
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;拉布拉多猎犬（英文名：Labrador retriever）原产地在加拿大。它的体格虽然大，却属于无攻击性犬种，被用做导盲犬。</p>
                    </div>
                </div>
                <div class="w">
                    <div class="box-hd">
                        <h3>罗威纳犬</h3>
                    </div>
                    <div class="box-bd">
                        <img src="./imgs/730e0cf3d7ca7bcbe5a0dc6f32cdf26af424a8e1.jpeg" alt="">
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;罗威纳犬（学名：rottweiler），源于欧洲南方。它身体强壮有力，气势足够凶悍，用于放牧牛群。</p>
                    </div>
                </div>
            </div>
    </div>
    <div class="fixedtool">
        <ul>
            <li class="current">边境牧羊犬</li>
            <li>贵宾犬</li>
            <li>德国牧羊犬</li>
            <li>金毛寻回猎犬</li>
            <li>杜宾犬</li>
            <li>喜乐蒂牧羊犬</li>
            <li>拉布拉多猎犬</li>
            <li>罗威纳犬</li>
        </ul>
    </div>
</body>
<script src="./js/jquery-1.8.3.min.js"></script>
<script>
    window.onload =  function () {
        var flag = true;
        var toolTop = $(".recom").offset().top;
        toggleTool();
        function toggleTool() {
            if ($(document).scrollTop() >= toolTop) {
                $(".fixedtool").fadeIn();
            } else {
                $(".fixedtool").fadeOut();

            };
        }
        $(window).scroll(function () {
            toggleTool();
            if (flag) {
                $(".floor .w").each(function (i, ele) {
                    if ($(document).scrollTop() >= $(ele).offset().top) {
                        $(".fixedtool li").eq(i).addClass("current").siblings().removeClass();
                    }
                })
            }
        });
        $(".fixedtool li").click(function () {
            flag = false;
            var current = $(".floor .w").eq($(this).index()).offset().top;
            $("body,html").stop().animate({
                scrollTop: current
            }, function () {
                flag = true;
            });
            $(this).addClass("current").siblings().removeClass();
        })
    }
</script>
</html>